<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>五子棋</title>
<style>
	#play{text-align:center;border:1px solid #f00;}
	#play div{}
	#play span{border:1px solid #f00;display:inline-block;width:20px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script >
var Gomoku = function(){
	var _ = this;
	this.createPlayer = function(b){
		var arr = new Array(this.maxY);
		for(var i=0;i<this.maxY;i++){
			arr[i] = new Array(this.maxX);
		};
		arr.qizi = b ? '●' : '○';
		this[b ? 'playing' : 'resting'] = arr;
		return arr;
	};
	this.init = function(x,y){
		this.maxX = x || 14;
		this.maxY = y || x || 14;
		this.player0 = this.createPlayer(0);
		this.player1 = this.createPlayer(1);
		var elem = $('#play').html('');
		for(var i=0;i<this.maxY;i++){
			var div = $('<div></div>').css('width',21*this.maxX).appendTo(elem);
			for(var j=0;j<this.maxX;j++){
				div.append(
					$('<span id="'+j+':'+i+'"> </span>')
						.click(this.check)
				);
			}
		}
		return this;
	};
	this.check = function(){
		$('#playing').html( _.playing == _.player0 ? "白棋" : "黑棋")
		var p = this.id.split(':');
		p = {
			x : parseInt(p[0],10),
			y : parseInt(p[1],10)
		};
		if(_.playing[p.y][p.x] || _.resting[p.y][p.x]){
			alert('格子有子。不能下鸟');
			return;
		}
		
		$(this).html(_.playing.qizi);
		_.playing[p.y][p.x] = 1;
		_.debug();
		if(_.success(p)){
			alert('胜利');
			_.init(_.maxX,_.maxY);
			return;
		}
		//交换对手
		var p = _.playing;
		_.playing = _.resting;
		_.resting = p;
	};
	this.success =function(n){
		var p = this.playing;
		// p = 玩家棋子数组
		// n = 玩家当前棋子坐标
		//alert(n.x + ':' + n.y);
		var line = [];
		//横向
		line[0] = p[n.y].join(',');
		//纵向
		line[1] = function(){
			var a = [];
			for(var i=0;i<p.length;i++)
				a.push(p[i][n.x]);
			return a.join(',');
		}();
		//左上到右下 \
		line[2] = function(){
			var postionDiff = n.x - n.y;
			var a = [];
			for(var i=0;i<p.length;i++){
				for(var j=0;j<p[i].length;j++){
					if(j - i == postionDiff){
						a.push(p[i][j]);
						break;
					}
				}
			}
			return a.join(',');
		}();
		//左下到右上 /
		line[3] = function(){
			var postionSum = n.x + n.y;
			var a = [];
			for(var i=0;i<p.length;i++){
				for(var j=0;j<p[i].length;j++){
					if(j + i == postionSum){
						a.push(p[i][j]);
						break;
					}
				}
			}
			return a.join(',');
		}();
		return (line.join('$')).indexOf('1,1,1,1,1')>0;
	}
	this.debug = function(){
		var a = [];
		for(var i=0;i<this.playing.length;i++){
			for(var j=0;j<this.playing[i].length;j++)
				this.playing[i][j] = this.playing[i][j] ? 1 :0;
			a[i] = this.playing[i].join(',');
		}
		
		$(this.playing == this.player0? '#player0' : '#player1').html(a.join('<br />'));
	}
};
</script>
<body>
<h1>by fisker</h1>
<div>
<div id='player0'></div>
<div id='playzone'>
<div id="playing"></div>
<div id='play'></div>
</div>
<div id='player1'></div>
</div>
<style>
#player0{border:1px solid #0f0;width:300px;float:left;}
#player1{border:1px solid #00f;width:300px;float:right;}
#playzone{border:5px double #000;width:300px;float:left;}
</style>
<script>
$(function(){
	(new Gomoku).init(12,16);
});
</script>
</body>
</html>